<template>
	<view class="auth">
		<image src="@/static/auth-bg.png" class="bg-img"></image>
		<view class="auth-body">
			<wd-tabs custom-class="tabs" v-model="loginTab" @change="init" animated>
				<wd-tab title="账号密码登录">
					<view class="pp bg-white">
						<wd-form ref="loginFrom" class="mp " :model="info">
							<wd-cell-group border>
								<wd-input label="用户名" label-width="80px" prop="phone" clearable v-model="info.phone"
									placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
								<wd-input label="密码" label-width="80px" prop="password" show-password clearable
									v-model="info.password" placeholder="请输入密码"
									:rules="[{ required: true, message: '请填写密码' }]" />
								<view class="flex items-center">
									<wd-input label="验证码" label-width="80px" prop="captcha" v-model="info.captcha"
										placeholder="请填写图形验证码" :rules="[{ required: true, message: '请填写图形验证码' }]" />
									<image class="captcha" @click="init" :src="captcha.captcha" mode=""></image>
								</view>
							</wd-cell-group>
						</wd-form>
					</view>
					<view class="footer">
						<wd-button type="primary" size="large" @click="handleDoLogin" block>登录</wd-button>
					</view>
				</wd-tab>
				<wd-tab title="手机验证码登录">
					<view class="pp bg-white">
						<wd-form ref="phoneFrom" class="mp " :model="register">
							<wd-cell-group border>
								<wd-input label="用户名" label-width="80px" prop="phone" clearable v-model="register.phone"
									placeholder="请输入手机号" :rules="[{ required: true, message: '请输入手机号' }]" />
								<view class="flex items-center">
									<wd-input label="验证码" label-width="80px" prop="captcha" v-model="register.captcha"
										placeholder="请填写图形验证码" :rules="[{ required: true, message: '请填写图形验证码' }]" />
									<image class="captcha" @click="init" :src="captcha.captcha" mode=""></image>
								</view>
								<view class="flex items-center">
									<wd-input label="验证码" label-width="80px" prop="code" v-model="register.code"
										placeholder="请填写短信验证码" :rules="[{ required: true, message: '请填写短信验证码' }]" />
									<wd-button size="small" @click="handleGetPhoneCode"
										style="margin-top: 8rpx;">获取验证码</wd-button>
								</view>
							</wd-cell-group>
						</wd-form>
					</view>
					<view class="footer">
						<wd-button type="primary" size="large" @click="handlePhoneLogin" block>登录</wd-button>
					</view>
				</wd-tab>
				<wd-tab title="注册">
					<view class="pp bg-white">
						<wd-form ref="form" class="mp " :model="register">
							<wd-cell-group border>
								<wd-input label="手机号" label-width="80px" prop="phone" clearable v-model="register.phone"
									placeholder="请输入手机号" :rules="[{ required: true, message: '请输入手机号' }]" />
								<view class="flex items-center">
									<wd-input label="验证码" label-width="80px" prop="value2" v-model="register.captcha"
										placeholder="请填写图形验证码" :rules="[{ required: true, message: '请填写图形验证码' }]" />
									<wd-button size="small" style="margin-top: 8rpx;">获取验证码</wd-button>
								</view>
								<wd-input label="密码" label-width="80px" prop="value2" show-password clearable
									v-model="info.password" placeholder="请输入密码"
									:rules="[{ required: true, message: '请填写密码' }]" />
								<wd-input label="密码" label-width="80px" prop="value2" show-password clearable
									v-model="info.password" placeholder="请再次输入密码"
									:rules="[{ required: true, message: '请确认密码' }]" />
							</wd-cell-group>
						</wd-form>
					</view>
					<view class="footer">
						<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
					</view>
				</wd-tab>
			</wd-tabs>
		</view>
		<wd-notify />
	</view>
</template>

<script setup>
	import {
		useNotify
	} from '@/uni_modules/wot-design-uni'

	const {
		showNotify,
		closeNotify
	} = useNotify()
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import {
		apiGetCaptcha,
		apiLogin,
		sendSmsCaptcha
	} from "@/api/auth.js"
	const info = reactive({
		phone: "",
		password: "",
		captcha: ""
	})

	const register = reactive({
		phone: "",
		captcha: "",
		code: ""
	})

	const captcha = reactive({
		captcha: "",
		uuid: "",
		loginCode: ""
	})

	const loginTab = ref(0)

	const loginFrom = ref()
	const phoneFrom = ref()

	const init = () => {
		uni.login({
			success(res) {
				captcha.loginCode = res.code
			}
		})
		apiGetCaptcha().then(res => {
			Object.assign(captcha, res)
		})
	}

	const handleSubmit = () => {

	}


	const handleDoLogin = () => {
		loginFrom.value
			.validate()
			.then(({
				valid,
				errors
			}) => {
				if (valid) {
					apiLogin({
						"verifyCode": "",
						"mobile": "",
						"account": info.phone,
						"password": info.password,
						"isParty": true,
						"partyData": {
							"oauth": "MP-WEIXIN",
							"code": captcha.loginCode,
							"userInfo": {
								"nickName": "微信用户",
								"gender": 0,
								"language": "",
								"city": "",
								"province": "",
								"country": "",
								"avatarUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
								"is_demote": true,
								"type": "profile"
							}
						},
						"captchaCode": info.captcha,
						"uuid": captcha.uuid
					}).then(res => {
						showNotify({
							type: 'success',
							message: '登录成功'
						})
						setTimeout(() => {
							uni.setStorageSync("token", res.token)
							uni.setStorageSync("userId", res.userId)
							uni.setStorageSync("username", res.userName)
							uni.switchTab({
								url: "/pages/index/index"
							})
						}, 500)

					}).catch((err) => {
						init()
					})
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}

	const handlePhoneLogin = () => {
		phoneFrom.value
			.validate()
			.then(({
					valid,
					errors
				}) => {
					if (valid) {
						apiLogin({
							"verifyCode": register.code,
							"mobile": register.phone,
							"isParty": true,
							"partyData": {
								"oauth": "MP-WEIXIN",
								"code": captcha.loginCode,
								"userInfo": {
									"nickName": "微信用户",
									"gender": 0,
									"language": "",
									"city": "",
									"province": "",
									"country": "",
									"avatarUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
									"is_demote": true,
									"type": "profile"
								}
							},
							"captchaCode": register.captcha,
							"uuid": captcha.uuid
						}).then(res => {
							showNotify({
								type: 'success',
								message: '登录成功'
							})
							setTimeout(() => {
								uni.setStorageSync("token", res.token)
								uni.setStorageSync("userId", res.userId)
								uni.setStorageSync("username", res.userName)
								uni.switchTab({
									url: "/pages/index/index"
								})
							}, 500)
						
						}).catch((err) => {
							init()
						})
					}
				}
			)
	}
	onMounted(() => {
		init()
	})


	const handleGetPhoneCode = () => {
		if (register.phone === "") {
			showNotify({
				type: 'danger',
				message: '请输入手机号'
			})
			return
		}

		if (register.captcha === "") {
			showNotify({
				type: 'danger',
				message: '请输入图形验证码'
			})
			return
		}

		sendSmsCaptcha({
			"captchaCode": register.captcha,
			"mobile": register.phone,
			"uuid": captcha.uuid
		}).then(res => {
			showNotify({
				type: 'success',
				message: "下发成功"
			})
		}).catch(err => {
			showNotify({
				type: 'danger',
				message: err.message || "发生错误"
			})
		})
	}
</script>

<style lang="scss" scoped>
	.auth {
		position: relative;
		width: 100%;

		&-body {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 120rpx 20rpx;

		}

		&-btn {
			width: 80%;
			margin: 0 auto;

			.desc {
				font-size: 24rpx;
				color: #999;
				margin-top: 24rpx;
				text-align: center;
			}
		}

		.captcha {
			width: 240rpx;
			height: 80rpx;
		}
	}

	.footer {
		margin-top: 120rpx;
	}

	.bg-img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: var(--page-height);
		object-fit: cover;
		z-index: -1;
	}
</style>